<template>
<div class="editProduct-main">
    <el-card class="card">
        <div slot="header" class="header" v-if="id"> 编辑商品</div>

        <div slot="header" class="header" v-else> 新增商品</div>
        <div>
            <div class="steps">
                <el-steps :active="active" finish-status="success">
                    <el-step title="商品信息" icon="el-icon-edit"></el-step>
                    <el-step title="库存信息" icon="el-icon-edit"></el-step>
                    <el-step title="提交" icon="el-icon-upload"></el-step>
                </el-steps>
            </div>

            <el-form ref="goods" :model="goods" label-width="80px" :rules="goodsRules" v-loading="loading" element-loading-text="别着急哈……☹">
                <!-- 商品编辑内容区  第一部分-->
                <div class="content one" v-show="active===1">
                    <div class="part1">
                    <el-tag type="success">1、商品基本信息</el-tag>

                    <el-row :gutter="0" style="margin-top:20px;">
                        <el-col :span="8">
                            <el-form-item label="商品名称" prop="name">
                                <el-input v-model="goods.product.name" placeholder="请输入商品名称"></el-input>
                            </el-form-item>
                        </el-col>

                        <!-- 商品品牌名称 id和name都要获得 绑定的是value中的值-->
                        <el-col :span="8">
                            <el-form-item label="商品品牌" prop="brandId">
                                <el-select v-model="goods.product.brandName" @change="selectBrand" placeholder="请选择品牌">
                                    <el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>

                        <!--促销类型 promotionType  -->
                        <el-col :span="8">
                            <el-form-item label="促销类型" prop="name">
                                <el-select v-model="goods.product.promotionType" @change="selectpromotionType(goods.product.promotionType)" placeholder="请选择促销分类">
                                    <el-option v-for="item in promotionTypeList" :key="item.id" :label="item.name" :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <!-- 第二行数据 -->
                    <el-row :gutter="10">
                        <el-col :span="8">
                            <el-form-item label="商品分类" prop="productCategoryName">
                                <el-select v-model="goods.product.productCategoryName " @change="selectCategory" placeholder="请选择商品分类">
                                    <el-option v-for="item in categoryList" :key="item.category.id" :label="item.category.name" :value="item.category">
                                    </el-option>
                                </el-select>
                                <!-- <el-cascader v-model="value" :options="categoryList" :props="{ expandTrigger: 'hover' }" @change="handleChange"></el-cascader> -->
                            </el-form-item>
                        </el-col>
                        <!-- 价格直接写吧还是 -->
                        <el-col :span="8">
                            <el-form-item label="商品现价" prop="price">
                                <el-input v-model="goods.product.price " placeholder="请输入商品现价"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="商品原价" prop="originalPrice">
                                <el-input v-model="goods.product.originalPrice " placeholder="请输入商品原价"></el-input>
                            </el-form-item>
                        </el-col>

                    </el-row>
                    <el-row :gutter="10">
                        <el-col :span="12">
                            <el-form-item label="商品描述">
                                <el-input v-model="goods.product.description " placeholder="商品描述"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="备注:">
                                <el-input v-model="goods.product.note" placeholder="备注信息"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    </div>

                    <div class="part2">
                        <el-tag type="success">2、商品基本状态</el-tag>
                    <!-- 几个switch开关 change事件不需要啊这又不是在列表页更改啊想多了啊啊啊啊-->
                    <el-row :gutter="10" style="marign-top:40px;">
                        <!-- 新品 -->
                        <el-col :span="8">
                            <el-form-item label="是否新品">
                                <el-switch v-model="goods.product.newStatus" :active-value="1" :inactive-value="0" active-color="#13ce66"></el-switch>
                            </el-form-item>
                        </el-col>
                        <!-- 推荐 -->
                        <el-col :span="8">
                            <el-form-item label="是否推荐">
                                <el-switch v-model="goods.product.recommendStatus" :active-value="1" :inactive-value="0"></el-switch>

                            </el-form-item>
                        </el-col>
                        <!-- 是否预告 -->
                        <el-col :span="8">
                            <el-form-item label="是否预告">
                                <el-switch v-model="goods.product.previewStatus" :active-value="1" :inactive-value="0"></el-switch>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="10">
                        <el-col :span="8">
                            <el-form-item label="是否发布">
                                <el-switch v-model="goods.product.publishStatus" :active-value="1" :inactive-value="0"></el-switch>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="是否审核">
                                <el-switch v-model="goods.product.verifyStatus" :active-value="1" :inactive-value="0" active-color="#13ce66"></el-switch>
                            </el-form-item>
                        </el-col>
                        <!-- 时是否删除 deleteStatus  -->
                        <el-col :span="8">
                            <el-form-item label="是否删除">
                                <el-switch v-model="goods.product.deleteStatus" :active-value="1" :inactive-value="0" active-color="#13ce66"></el-switch>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    </div>

    <div class="part3">
        <el-tag type="success">3、商品详情</el-tag>

                    <el-row :gutter="10" style="margin-top:30px;">
                        <el-col :span="8">
                            <el-form-item label="商品重量">
                                <el-input v-model="goods.product.weight" placeholder="请输入商品重量"></el-input>
                            </el-form-item>

                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="关键词" prop="keywords">
                                <el-input v-model="goods.product.keywords " placeholder="请输入关键词"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="商品排序">
                                <el-input v-model="goods.product.sort" placeholder="请输入商品排序"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                   <el-form-item label="上传商品图片" label-width="120">
                         <el-upload class="avatar-uploader" :headers="headers" action="/lejuAdmin/material/uploadFileOss" :show-file-list="false" :on-success="handleAvatarSuccess111" >
                        <img v-if="goods.product.pic" :src="goods.product.pic" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                        <div class="el-upload__tip" v-if="!goods.product.pic">只能上传jpg/png/gif文件，且不超过1.5M</div>
                   </el-form-item>
                 
                    <!-- 商品服务  和label是对应的-->
                    <el-row :gutter="10">
                        <el-col :span="16">
                            <el-form-item label="商品服务">
                                <el-checkbox-group @change="serviceChange" v-model="checkList">
                                    <el-checkbox label="1" name="one">无忧退货</el-checkbox>
                                    <el-checkbox label="2" name="two">快速退款</el-checkbox>
                                    <el-checkbox label="3" name="three">免费包邮</el-checkbox>
                                    <!-- <el-checkbox v-for="item in serviceList" :label="item" :key="item">{{item}}</el-checkbox> --> -->
                                </el-checkbox-group>
                            </el-form-item>
                        </el-col>
                        <!-- 商品重量 -->
                        <el-col :span="8">
                            <el-form-item label="重量">
                                <el-input v-model="goods.product.weight " placeholder="请输入商品重量"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
    </div>

                </div>

                <!-- 第二部分---商品库存信息 ----->
                <div class="two" v-show="active==2">
                    <el-row :gutter="10">
                        <el-col :span="16" style="text-align:left;">
                            <el-form-item label="副标题">
                                <el-input v-model="goods.product.subTitle" placeholder="请输入商品副标题"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="库存预警">
                                <el-input v-model="goods.product.lowStock " placeholder="请输入库存预警"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                       <el-form-item label="图片墙">
                        <el-upload list-type="picture-card" :headers="headers" action="/lejuAdmin/material/uploadFileOss" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :limit="4" :file-list="fileList">
                            <i slot="default" class="el-icon-plus"></i>
                            <div slot="file" slot-scope="{file}">
                                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="sorry">
                                <span class="el-upload-list__item-actions">
                                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                        <i class="el-icon-zoom-in"></i>
                                    </span>
                                    <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(fileList)">
                                        <i class="el-icon-delete"></i>
                                    </span>
                                </span>
                            </div>
                        </el-upload>
                        <div class="tips">tips:最多上传五张图片,鼠标放在图片可以预览和删除图片</div>
                        <el-dialog :visible.sync="dialogVisible">
                            <img width="100%" :src="dialogImageUrl" alt="sorry">
                        </el-dialog>
                    </el-form-item>

                    <!-- 颜色和大小的选择 -->
                    <el-form-item label="SKu列表">
                        <!-- 颜色和大小的选择 -->
                        <el-row :gutter="10">
                            <el-col :span="2">
                                颜色:
                            </el-col>
                            <el-col :span="20">
                                <el-checkbox-group v-model="selectedColorList">
                                    <el-checkbox v-for="item in colorList" :label="item" :key="item">{{item}}
                                        <el-link type="danger" @click="delColor(item)" :underline="false">删除</el-link>
                                    </el-checkbox>
                                </el-checkbox-group>
                            </el-col>
                        </el-row>
                        <el-row :gutter="10">
                            <el-col :span="2">
                                大小:
                            </el-col>
                            <el-col :span="20">
                                <el-checkbox-group v-model="selectedSizeList">
                                    <el-checkbox v-for="item in sizeList" :label="item" :key="item">{{item}}
                                        <el-link type="danger" @click="delSize(item)" :underline="false">删除</el-link>
                                    </el-checkbox>
                                </el-checkbox-group>
                            </el-col>
                        </el-row>

                        <!-- 创建颜色和大小列表选项 -->
                        <el-row :gutter="10">
                            <el-col :span="6">
                                <el-input v-model="colors" placeholder="请输入商品颜色" @keyup.enter.native="enterEvents"></el-input>
                            </el-col>
                            <el-col :span="6">
                                <el-button type="success" @click="createColor">点击创建颜色</el-button>
                            </el-col>
                            <el-col :span="6">
                                <el-input v-model="sizes" placeholder="请输入大小规格" @keyup.enter.native="enterEvents1"></el-input>
                            </el-col>
                            <el-col :span="6">
                                <el-button type="success" @click="createSize">点击创建大小</el-button>
                            </el-col>
                        </el-row>
                        <el-row :gutter="10" style="margin-top:20px;">
                            <el-col :span="8">
                                <el-button type="success" plain @click="createSkuList">点击生成SKu列表</el-button>
                            </el-col>
                            <el-col :span="8">
                                <el-button type="success" plain @click="addSKu">新增sku列表</el-button>
                            </el-col>
                        </el-row>
                        <!-- 生成的sku列表内容 -->
                        <el-table :data="goods.pmsSkuStockList" style="width: 100%;margin-top:20px;" border>
                            <el-table-column header-align="center" align="center" type="index" label="序号" :width="50" />
                            <!-- 商品图片 -->
                            <el-table-column header-align="center" align="center" label="图片" width="150">
                                <template slot-scope="scope">
                                    <el-upload class="avatar-uploader" :headers="headers" action="/lejuAdmin/material/uploadFileOss" :show-file-list="false" :on-success="handleAvatarSuccess1" :before-upload="beforeAvatarUpload1">
                                        <img v-if="scope.row.pic" :src="scope.row.pic" class="avatar">
                                        <div v-else class="el-icon-plus avatar-uploader-icon" @click="uploadImg(scope.row.id)"></div>
                                    </el-upload>
                                </template>
                            </el-table-column>

                            <el-table-column header-align="center" align="center" label="颜色" width="90">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.spData[0].value" placeholder=""></el-input>
                                    <!-- {{}} -->
                                </template>
                            </el-table-column>
                            <el-table-column header-align="center" align="center" label="大小" width="90">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.spData[1].value" placeholder=""></el-input>
                                    <!-- {{scope.row.spData[1].value}} -->
                                </template>
                            </el-table-column>
                            <el-table-column header-align="center" align="center" label="价格" width="120">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.price" placeholder=""></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column header-align="center" align="center" label="促销价格" width="120">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.promotionPrice" placeholder=""></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column header-align="center" align="center" width="120" label="库存">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.stock" placeholder=""></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column header-align="center" align="center" width="120" label="预警库存">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.lowStock" placeholder=""></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column header-align="center" align="center" label="锁定库存" width="120">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.lockStock" placeholder=""></el-input>
                                </template>
                            </el-table-column>
                            <!-- 删除和编辑 -->
                            <el-table-column fixed="right" label="操作" width="120" class="btns">
                                <template slot-scope="scope">
                                    <!-- 删除还是要根据下标删除--- -->
                                    <!-- <el-button type="primary" icon="el-icon-edit" circle @click="goEditProduct(scope.row.id)"></el-button> -->
                                    <el-button type="danger" icon="el-icon-delete" circle @click="goDelProduct(scope.row.id)"></el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-form-item>

                </div>

                <!-- 第三部分提交内容 -->
                <div class="third" v-show="active===3">
                    <TinymceEditor ref="tin" v-model="tinContent" :headers="headers" upload-url="/lejuAdmin/material/uploadFileOss"></TinymceEditor>
                </div>

            </el-form>

            <!--弹窗  打开新增sku-->
            <!-- <el-dialog title="新增SKu" :visible.sync="dialogFormVisible" width="60%" class="dialogSku">
                <el-form ref="newSku" :model="newSku" label-width="80px" :rules="rulesSku">
                    <el-row :gutter="10">
                        <el-col :span="8">
                            <el-form-item label="颜色:" prop="color">
                                <el-input v-model="newSku.color" placeholder=""></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="大小:" prop="size">
                                <el-input v-model="newSku.size" placeholder=""></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="价格:">
                                <el-input v-model="newSku.price" placeholder=""></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="10">
                        <el-col :span="8">
                            <el-form-item label="促销价格:">
                                <el-input v-model="newSku.promotionPrice" placeholder=""></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="库存:">
                                <el-input v-model="newSku.stock" placeholder=""></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="预警库存:">
                                <el-input v-model="newSku.lowStock" placeholder=""></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item label="上传图片:">
                        <el-upload class="avatar-uploader" :headers="headers" action="/lejuAdmin/material/uploadFileOss" :show-file-list="false" :on-success="handleAvatarSuccess2" :before-upload="beforeAvatarUpload1" style=" width: 120px;
        height: 120px;
        border: 1px dashed #d9d9d9;
        border-radius: 6px;   font-size: 28px; line-height: 140px;
        text-align: center; ">
                            <img v-if="newSku.pic" :src="newSku.pic" class="avatar" style="width:120px;height:120px;">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                        <i v-show="newSku.pic" class="el-icon-delete" @click="delSkuImg"></i>
                    </el-form-item>

                </el-form>

                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="submitSku">提 交</el-button>
                </div>
            </el-dialog> -->

            <!-- 编辑的内容区三大块 -->
            <el-row :gutter="10" style="margin-top:20px;">
                <el-col :span="12" style="text-align:right;">
                    <el-button style="width:180px;" v-if="active!==1" type="primary" icon="el-icon-arrow-left" @click="prev">上一步</el-button>
                </el-col>
                <el-col :span="12" style="text-align:center;">
                    <el-button style="width:180px;" v-if="active<3" type="primary" @click="next">下一步<i class="el-icon-arrow-right el-icon--right"></i></el-button>
                </el-col>
                <el-col :span="12" style="text-align:center;">
                    <el-button style="width:120px;" v-show="active==3" type="primary" @click="submitGoodsInfo">提交</el-button>
                </el-col>
            </el-row>

        </div>
    </el-card>

</div>
</template>

<script>
import TinymceEditor from '@/components/Tinymce'

import {
    addProductAndSkus,
    switchPublishStatus,
    switchNewStatus,
    switchPreviewStatus,
    switchRecommandStatus,
    switchVerifyStatus,
    productSkusDetail,
    updateProductAndSkus
} from '@/api/product/index'
import {
    getToken
} from '@/utils/myAuth'
import {
    findAllBrand
} from '@/api/product/brand/index'

import {
    getAllCategory
} from '@/api/product/category/index'

export default {
    name: 'EditProduct',

    components: {
        TinymceEditor,
    },
    data() {
        return {
            // id保存的是编辑
            id: '',
            // 步骤条激活
            active: 1,

            // 商品表单内容
            goods: {
                // 库存分类列表 数组对象这是多个数据
                pmsSkuStockList: [

                ],
                // 商品分类对象
                product: {
                    //     // 照片墙
                    //     albumPics: '',

                    //     //    brandName:'小米',

                    albumPics: '',
                    brandId: '',
                    brandName: '',
                    deleteStatus: 0,
                    description: '',
                    detailDesc: '',
                    detailHtml: '',
                    detailMobileHtml: '',
                    detailTitle: '',
                    feightTemplateId: '',
                    giftGrowth: 0,
                    giftPoint: 0,
                    // id: '',
                    keywords: '',
                    lowStock: 0,
                    name: '',
                    newStatus: 0,
                    note: '',
                    originalPrice: 200,
                    pic: '',
                    previewStatus: 0,
                    price: 100,
                    productAttributeCategoryId: '',
                    productCategoryId: '',
                    productCategoryName: '',
                    productSn: '',
                    promotionEndTime: '',
                    promotionPerLimit: 100,
                    promotionPrice: 100,
                    promotionStartTime: '',
                    promotionEndTime: '',
                    promotionType: 0,
                    publishStatus: 0,
                    recommendStatus: 0,
                    sale: 100,
                    serviceIds: '',
                    sort: 0,
                    stock: 100,
                    subTitle: '',
                    unit: '',
                    usePointLimit: 100,
                    verifyStatus: 0,
                    weight: 12

                },
            },
            // 品牌列表
            brandList: [],

            // 商品分类列表
            categoryList: [],

            // 促销列表
            promotionTypeList: [{
                    name: '没有促销使用原价',
                    id: 0
                },
                {
                    name: '使用促销价',
                    id: 1
                },
                {
                    name: '使用会员价',
                    id: 2
                },
                {
                    name: '使用阶梯价格',
                    id: 3
                },
                {
                    name: '使用满减价格',
                    id: 4
                },
                {
                    name: '限时购',
                    id: 5
                },
            ],
            // 商品基本信息中的图片墙
            dialogImageUrl: '',
            dialogVisible: false,
            disabled: false,
            fileList: [],

            //  服务列表内容
            serviceList: ['无忧退货', '快速退款', '免费包邮'],

            // 服务选中的内容
            checkList: ['1', '2', '3'],
            value: [],

            // 库存信息创建颜色和分类
            colorList: [],
            sizeList: [],

            // 颜色和分类
            colors: '',
            sizes: '',

            // 选中的颜色和属性列表
            selectedColorList: [],
            selectedSizeList: [],
            // 上传的图片这是
            imgId: '',

            // 富文本内容
            tinContent: '',

            newSku: {
                // id: '',
                pic: '',
                spData: [],
                skuCode: '', // sku编码
                productId: ''
            },

            dialogFormVisible: false,
            // 新增sku的验证
            rulesSku: {
                color: [{
                    required: true,
                    message: '请输入商品颜色',
                    trigger: 'blur'
                }, ],
                size: [{
                    required: true,
                    message: '请输入大小规格',
                    trigger: 'blur'
                }, ],
            },
            // 商品基本信息验证
            goodsRules: {
                name: [{
                    required: true,
                    message: '请输入商品名称',
                    trigger: 'blur'
                }],
                // brandId:[{
                //      required: true,
                //      message:'请选择商品品牌',
                //      trigger: 'change'
                // }],
                //  productCategoryName:[{
                //      required: true,
                //      message:'请选择商品分类',
                //      trigger: 'change'
                // }],
                price: [{
                        required: true,
                        message: '请输入商品现价',
                        trigger: 'blur'
                    },
                    {
                        type: 'number',
                        message: '价格必须为数值'
                    }
                ],
                originalPrice: [{
                    required: true,
                    message: '请输入商品原价',
                    trigger: 'blur'
                }, {
                    type: 'number',
                    message: '价格必须为数值'
                }],
            },
            loading: false

        };
    },
    computed: {
        headers() {
            return {
                token: getToken()
            }
        }
    },
    created() {

        // 获取品牌列表
        this.getBrand()

        // 获取商品分类列表
        this.getAllCategoryList()

        // 服务类型页面初始化的时候也要写
        this.goods.product.serviceIds = this.checkList.join(',')
        console.log(this.goods.product.serviceIds);

        // 获取商品ID--编辑商品--先获取商品详情再编辑提价两个接口啊
        if (this.$route.query.id) {
            console.log(this.$route.query.id);
            this.id = this.$route.query.id

            productSkusDetail(this.id).then(res => {
                console.log(res);
                if (res.success) {
                    this.loading = false

                    if (res.data.skus.length > 0) {
                        res.data.skus.forEach(el => {
                            el.spData = JSON.parse(el.spData)
                        })
                    }

                    // 服务类型的转换--数组
                    console.log(res.data.product.serviceIds.split(','));

                    this.fileList.forEach((el, index) => {
                        el.url = res.data.product.albumPics.split(',')[index]
                    })

                    this.goods.product = res.data.product
                    this.goods.pmsSkuStockList = res.data.skus

                }else{
                    this.$message.error('请求失败了！！！')
                }

            })

        }

    },
    mounted() {

    },
    methods: {
        // 获取品牌列表
        getBrand() {
            findAllBrand().then(res => {
                console.log(res);
                this.brandList = res.data.items
            })

        },
        // 商品分类列表
        getAllCategoryList() {
            getAllCategory().then(res => {
                console.log(res);
                if (res.success) {
                    this.categoryList = res.data.items
                }
            })

        },
        // 选择品牌分类
        selectBrand(item) {
            console.log(item);
            // 确定brandid和brandName  brandName 
            this.goods.product.brandId = item.id
            this.goods.product.brandName = item.name
        },

        // 选择商品类型分类
        selectCategory(item) {
            console.log(item);
            this.goods.product.productCategoryName = item.name
            this.goods.product.productCategoryId = item.id

        },
        selectop(val) {
            console.log(val);
        },
        handleChange() {

        },


        // 选择促销分类
        selectpromotionType(val) {
            console.log(val);
        },
        // 步骤条的改变
        next() {
            if (this.active++ > 2) this.active = 1;
        },
        // 前进
        prev() {
            if (this.active > 1) {
                this.active--
            }
        },
        // 提交商品信息
        submitGoodsInfo() {
            // 富文本内容
            this.goods.product.detailDesc = this.tinContent
            // 富文本网页内容
            this.goods.product.detailHtml = this.tinContent

            this.$confirm('确定提交吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

                // 编辑提交内容
                if (this.id) {
                    if (this.goods.pmsSkuStockList.length > 0) {
                        this.goods.pmsSkuStockList.forEach(el => {
                            el.spData = JSON.stringify(el.spData)
                        })
                    }
                    // 商品id
                    this.goods.product.id = this.id

                    updateProductAndSkus(this.goods).then(res => {
                        console.log(res);
                        if (res.success) {
                            this.$message.success('提交成功了')
                            // 跳转商品列表页
                            setTimeout(() => {
                                this.$router.push({
                                    name: 'productList'
                                })
                            }, 2000);
                        }else{
                            this.$message.error('提交失败了！！！')
                        }
                    })

                } else {
                    // spData ---转换为json格式的
                    if (this.goods.pmsSkuStockList.length > 0) {
                        this.goods.pmsSkuStockList.forEach(el => {
                            el.spData = JSON.stringify(el.spData)
                            // 删除el.id
                            delete el.id
                        })
                    }
               
                    // 新增商品的内容
                    console.log(this.goods);
                    addProductAndSkus(this.goods).then(resp => {
                        console.log(resp);
                        if (resp.success) {
                            this.$message.success('提交成功了')
                            // 跳转商品列表页
                            setTimeout(() => {
                                this.$router.push({
                                    name: 'productList'
                                })
                            }, 2000);
                        }else{
                            this.$message.error('提交失败!!!')
                        }
                    })
                }

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消提交'
                });
            });

        },
        handleAvatarSuccess111(res){
             if (res.success) {
                this.goods.product.pic = res.data.fileUrl
            }else{
                this.$message.error('上传失败！！！')
            }
        },

        // 图片墙的方法
        /* 
        删除图片可以根据对应的id找到filelist中的数据删除吧！
         */
        handleRemove(id) {
            console.log(id);

            this.$confirm('确定删除该图片吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                var index = this.fileList.findIndex(el => el.uid == id)
                this.fileList.splice(index, 1)
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            })

        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },

        // 图片提交成功后的方法
        handleAvatarSuccess(res, file, fileList) {

            this.fileList = fileList

            console.log(fileList);
            var str = ''
            fileList.forEach(el => {
                str = el.response.data.fileUrl + ',' + str
            })
            // 去掉最后一个逗号
            str = str.substring(0, str.length - 1)

            this.goods.product.albumPics = str
            console.log(str);

        },
        beforeAvatarUpload(file) {

            // const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 1.5;

            // 正则判断图片的类型格式  ig表示忽略大小
            var reg = /image\/(jpeg|png|gif)/ig

            const isFileTypeOk = reg.test(file.type)

            if (!isFileTypeOk) {
                this.$message.error('上传头像图片只能是 JPG、PNG、GIF 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isFileTypeOk && isLt2M;
        },
        serviceChange(val) {
            console.log(val);
            // 数组转化为string类型的并拼接直接使用join即可
            console.log(val.join(','));
            this.goods.product.serviceIds = val.join(',')

        },

        // 创建颜色
        createColor() {
            var _this = this
            if (_this.colorList.length == 0) {
                _this.colorList.push(this.colors)
            } else {
                _this.colorList.forEach(el => {
                    if (el == _this.colors) {
                        _this.$message.error('Sorry!颜色已经存在了')
                    } else {
                        _this.colorList.push(this.colors)
                    }
                })
            }
            _this.colors = ''

            console.log(this.colorList);
        },
        createSize() {
            var _this = this
            if (_this.sizeList.length == 0) {
                _this.sizeList.push(this.sizes)
            } else {
                _this.sizeList.forEach(el => {
                    if (el == _this.sizes) {
                        _this.$message.error('Sorry!大小型号已经存在了')
                    } else {
                        _this.sizeList.push(this.sizes)
                    }
                })
            }
            _this.sizes = ''
            console.log(this.sizeList);

        },
        enterEvents() {
            this.createColor()
        },
        enterEvents1() {
            this.createSize()
        },
        // 生成对应的列表
        createSkuList() {
            // 1。判断用户选择了颜色或大小没默认都要选择
            if (this.selectedColorList.length == 0 && this.selectedSizeList.length == 0) {
                this.$message.error('请选择对应的颜色和大小规格！！！')
            } else {
                var arr = []
                // 两层for循环生成对应的列表内容--是一个数组不嵌套那种
                for (var i = 0; i < this.selectedColorList.length; i++) {

                    for (var j = 0; j < this.selectedSizeList.length; j++) {
                        var arr = [{
                            key: '颜色',
                            value: this.selectedColorList[i]
                        }, {
                            key: '大小',
                            value: this.selectedSizeList[j]
                        }]
                        var sku = {
                            id: this.guid(),
                            pic: '', //图片
                            lowStock: 120, //预警库存
                            lockStock: 120,
                            price: 400,
                            promotionPrice: 120,
                            spData: arr,
                            stock: 120, //库存
                            sale: 0, //销量
                            skuCode: '', // sku编码
                            productId: ''

                        }

                        // 生成对应的列表
                        this.goods.pmsSkuStockList.push(sku)
                    }
                }
                console.log(this.goods.pmsSkuStockList);

                // this.selectedColorList.forEach((colors,index)=>{

                //     this.selectedSizeList.forEach((sizes,indexs)=>{
                //         // 商品名字和颜色使用key和value保存的
                //            arr=[
                //               {
                //                   key:'颜色',
                //                   value:colors
                //               },
                //               {
                //                   key:'大小',
                //                   value:sizes
                //               }
                //           ]
                //     })
                // })

            }

        },
        // 删除颜色和大小
        delColorSize(row, arr, tip) {
            this.$confirm(`确定删除${tip}吗?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                var index = arr.findIndex(el => el == row)
                arr.splice(index, 1)

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        delColor(row) {
            this.delColorSize(row, this.colorList, '该颜色')
        },
        delSize(row) {
            this.delColorSize(row, this.sizeList, '该大小尺寸')
        },

        // sku图片上传前
        beforeAvatarUpload1(file) {
            // const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 1.5;

            // 正则判断图片的类型格式  ig表示忽略大小
            var reg = /image\/(jpeg|png|gif)/ig

            const isFileTypeOk = reg.test(file.type)

            if (!isFileTypeOk) {
                this.$message.error('上传头像图片只能是 JPG、PNG、GIF 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isFileTypeOk && isLt2M;
        },
        // 商品库存图片上传成功
        handleAvatarSuccess1(res) {
            console.log(res);
            if (res.success) {
                //    this.imageUrl=res.data.fileUrl
                this.goods.pmsSkuStockList.forEach(el => {
                    if (el.id == this.imgId) {
                        el.pic = res.data.fileUrl
                    }
                })
            }

        },
        uploadImg(id) {
            console.log(id);
            this.imgId = id

        },
        guid() {
            function randomNumber() {
                return Math.floor(Math.random() * 1000 + 10)
            }
            return randomNumber()
            // function S4() {
            //     return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
            // }
            // return (S4() + S4() + '-' + S4() + '-' + S4() + '-' + S4() + '-' + S4() + S4() + S4())
        },

        // 新增和编辑的删除要判断
        goDelProduct(id) {
            this.$confirm('此操作将永久删除该素材, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                if (this.id) {
                    // 调用接口删除sku吧
                    var index = this.goods.pmsSkuStockList.findIndex(el => el.id == this.id)
                    this.goods.pmsSkuStockList.splice(index)

                } else {
                    var index = this.goods.pmsSkuStockList.findIndex(el => el.id == id)
                    this.goods.pmsSkuStockList.splice(index)
                }

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        },
        // 新增sku列表内容

        // 打开弹窗写应该
        addSKu() {
            // this.dialogFormVisible=true
            var newSku = {
                id: this.guid(),
                productId: this.productId,
                lockStock: '',
                lowStock: '',
                stock: '',
                pic: '',
                price: this.goods.product.price,
                promotionPrice: this.goods.product.promotionPrice,
                sale: '',
                skuCode: '',
                spData: [{
                    'key': '颜色',
                    'value': ''
                }, {
                    'key': '容量',
                    'value': ''
                }],
                // newList:true
            }
            this.goods.pmsSkuStockList.push(newSku)

        },
        // 提交
        submitSku() {
            var obj = [{
                key: '颜色',
                value: this.newSku.color
            }, {
                key: '大小',
                value: this.newSku.size
            }]
            // 拼接颜色和大小--spadta原本是个数组应该是

            this.newSku.spData = obj

            this.newSku.id = this.guid()

            console.log(this.newSku);

            this.$refs.newSku.validate((valid) => {
                if (valid) {
                    this.goods.pmsSkuStockList.push(this.newSku)
                    this.dialogFormVisible = false

                    // 添加到table表格中
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });

        },
        //  图片上传成功回调
        handleAvatarSuccess2(res) {
            console.log(res);
            if (res.success) {
                this.newSku.pic = res.data.fileUrl

            }

        },
        delSkuImg() {
            this.$confirm('确定删除该图片吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.newSku.pic = ''

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        }

    },
};
</script>

<style lang="scss" scoped>
 
.card {
    margin: 30px;

    .header {
        font-weight: bolder;
        color: #26A65B;
        font-size: 22px;
    }

    .steps {
        margin: 20px;
    }
}

// 商品基本信息内容
.one {
    .el-upload-list__item-thumbnail {
        width: 148px;
        height: 148px;
    }
     .tips {
        font-size: 12px;
        opacity: .8;
        color: rgb(240, 166, 28);
    }
      .avatar-uploader .el-upload {
        width: 200px;
        height: 150px;
        border: 1px solid #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        background-color: red;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 20px;
        height: 15px;
        line-height: 140px;
        text-align: center;
    }

    .avatar {
        width: 200px;
        height: 150px;
        display: block;
    }

  
}

// 第二部分内容
.two {
      .el-upload-list__item-thumbnail {
        width: 148px;
        height: 148px;
    }

    .tips {
        font-size: 12px;
        opacity: .8;
        color: rgb(240, 166, 28);
    }
    .avatar-uploader .el-upload {
        width: 200px;
        height: 150px;
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 20px;
        height: 15px;
        line-height: 140px;
        text-align: center;
    }

    .avatar {
        width: 200px;
        height: 150px;
        display: block;
    }

}
</style>
